<template>
	<div>
		<template v-if="userInfo.teamId">
			<mu-list>
			    <mu-sub-header>近期任务总览</mu-sub-header>
			    <ul class="userInfo">
			    	<li>近期待处理事项（{{recentNo}}项）</li>
			    	<li>近期已完成工作（{{recentOk}}项）</li>
			    	<li>逾期未完成工作（{{noComplete}}项）</li>
			    </ul>
			</mu-list>
			<mu-divider/>
		</template>

		<template v-if="msgList.length">
			<mu-list>
			    <mu-sub-header>消息提醒</mu-sub-header>
			    <ul class="userInfo" v-for="(list, index) in msgList">
			    	<li>{{list.message}}</li>
			    	<li>
			    		<mu-raised-button class="raised-button" @click="handleMsg(1, list.msgId, index)" label="同意" icon="check" primary/>
			    		<mu-raised-button class="raised-button" @click="handleMsg(2, list.msgId, index)" label="拒绝" icon="close" secondary/>
			    	</li>
			    </ul>
			</mu-list>
		</template>
			
		<mu-list>
		    <mu-sub-header>我的信息</mu-sub-header>
		    <ul class="userInfo">
		    	<li>姓名：{{userInfo.userName}}（{{userInfo.sex}}）</li>
		    	<li>联系电话：{{userInfo.mobile}}</li>
		    	<li>职位：{{userInfo.job}}（{{userInfo.department}}）</li>
		    	<li>直属上司：{{userInfo.leader || '无'}}</li>
		    	<li>入职日期：{{userInfo.entryDate}}</li>
		    </ul>
		</mu-list>

		<template v-if="!userInfo.teamId">
			<div style="line-height: 24px; text-align: left; padding: 10px; background: #eee; margin: 0 10px; color: red;">
				注：当前您没有隶属团队，若要完整使用本应用全部功能，您必须先加入一个团队！<br>
				您可以选择自己创建一个团队，或联系某团队创始人邀请您加入团队。
			</div>
			<mu-list style="padding: 15px 10px 0;">
			    <mu-raised-button label="创建我的团队" fullWidth class="raised-button mt_10" style="height: 42px;"
			    	backgroundColor="#a4c639" @click="createTeamWindow = true"/>
			</mu-list>

			<!-- 创建团队window -->
			<mu-dialog :open="createTeamWindow" title="创建我的团队" @close="createTeamClose">
				<div style="text-align: left; overflow:hidden;">
					<mu-text-field label="输入团队名称，6字以内！" v-model="teamName" labelFloat/>
				</div>
			    <mu-flat-button slot="actions" @click="createTeam" label="保存提交" primary/>
			</mu-dialog>
		</template>

		<alerts-dialog :alertData="alertDialog"></alerts-dialog>
	</div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'
export default{
	data(){
		return {
			alertDialog: {},
			recentNo: 0,
			recentOk: 0,
			noComplete: 0,
			//创建团队相关
			createTeamWindow: false,
			teamName: '',
			//我的消息
			msgList: []
		}
	},
	methods: {
		//获取任务概况
		getAllTaskInfo(){
			let params = {
				mobile: this.userInfo.mobile,
				days: new Date(this.$store.state.curDate).getTime() - 86400000 * 30
			};

			axios.post($base + 'task/getAllTaskInfo', params).then(json => {
				json.data.forEach(e => {
					if(new Date(e.taskDate).getTime() <= new Date().getTime()){	//逾期任务
						if(e.taskStatus > 1){	//已完成
							this.recentOk++;
						}else{
							this.recentNo++;
						}
					}else{
						this.noComplete++;
					}
				})
			}).catch(json => {
				console.log(json)
			})
		},
		//创建团队相关
		createTeam(){
			let params = {
					teamName: this.teamName,
					mobile: this.$store.state.userInfo.mobile
				};

			switch(true){
				case !this.teamName:
					this.alertDialog = {
						openState: true,
						content: '请输入团队名称！'
					}
					return false;
				case this.teamName.length < 2 || this.teamName.length > 6:
					this.alertDialog = {
						openState: true,
						content: '团队名称长度不正确！'
					}
					return false;
				default: break;
			}

			axios.post($base + 'team/createTeam', params).then(json => {
				let data = json.data;
				if(data.error){
					this.alertDialog = {
						openState: true,
						content: data.error
					}
				}else{
					this.$store.state.userInfo.teamId = data.teamId;
					this.$store.state.userInfo.teamName = data.teamName;
					this.$store.state.appName = data.teamName;
					this.$store.state.userList.push({
						mobile: params.mobile,
						teamId: data.teamId,
						teamName: data.teamName,
						userName: this.$store.state.userInfo.userName
					})
					this.createTeamWindow = false;
					this.alertDialog = {
						openState: true,
						content: '团队创建成功！'
					}
				}
			}).catch(err => {
				console.log(err)
			})
		},
		//关闭窗口
		createTeamClose(){
			this.createTeamWindow = false;
		},
		//获取消息 
		getMessageList(){
			axios.post($base + 'message/getMsgList', {
				mobile: this.userInfo.mobile
			}).then(res => {
				this.msgList = res.data;
			}).catch(err => {
				console.log(err)
			})
		},
		//处理消息
		handleMsg(status, msgId, index){
			axios.post($base + 'message/setMsgStatus', {
				mobile: this.userInfo.mobile,
				msgId: msgId,
				status: status
			}).then(res => {
				if(status == 1){
					this.userInfo.teamId = res.data.teamId;
					this.userInfo.teamName = res.data.teamName;
					this.$store.state.appName = res.data.teamName;
					this.alertDialog = {
						openState: true,
						content: '已同意并加入团队' + res.data.teamName
					}
				}else{
					this.alertDialog = {
						openState: true,
						content: '已拒绝'
					}
				}
				this.msgList.splice(index, 1);
				this.getUserList();
			}).catch(err => {
				this.alertDialog = {
					openState: true,
					content: err
				}
			})
		},
		//获取所有成员列表
		getUserList(){
			axios.post($base + 'users/userList', {
				teamId: this.userInfo.teamId
			}).then(json => {
				this.$store.state.userList = json.data;
			}).catch(json => {
				console.log(json)
			})
		},
	},
	computed: mapState(['userInfo']),
	mounted(){
		this.userInfo.entryDate = moment(this.userInfo.entryDate).format('YYYY-MM-DD');
		this.getAllTaskInfo();
		this.getMessageList();
	}
}
</script>